<template>
  <div class="address-info-box bgc-white">
    <div class="subject bgc-white">
      <span class="font-16 font-color-3">收货地址</span>
    </div>
    <div class="bgc-white pad-t-13 pad-l-20 pad-r-20">
      <div class="add-btn flex flex-center cursor-p" @click="addAddressEvent">
        <span>添加地址</span>
      </div>
    </div>
    <div class="pad-l-20 pad-r-22 mar-t-20">
      <el-table :data="tableData" style="width: 100%" v-loading="addressListLoading" :element-loading-text="addressLoadingText">
        <el-table-column prop="receiverName" label="收货人" width="100"/>
        <el-table-column prop="receiverPhone" label="手机号" width="180"/>
        <el-table-column prop="addressName" label="所在地区" width="180" />
        <el-table-column prop="address" label="详细地址" />
        <el-table-column prop="address" label="是否默认地址" width="110">
          <template #default="scope">
            <el-switch
              v-model="scope.row.defaultFlag"
              active-color="#13ce66"
              inactive-color="#ff4949" 
              :active-value="1" 
              :inactive-value="0"
              disabled
              >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button type="text" @click="editAddressEvent(scope.row.addressId)">修改</el-button>
            <el-button type="text" @click="deleteEvent(scope.row.addressId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <add-address-dialog ref="dialogDeliver" :onSure="handleAddAddressDialogSure" />
    </div>
    <confirm-dialog ref="confirmDialogRef" :onSure="handleConfirmSure"></confirm-dialog>
  </div>
</template>

<script lang="ts">
import AddAddressDialog from './components/AddAddressDialog/index.vue'
import confirmDialog from '@/components/confirmDialog/index.vue'
import { ElMessage } from 'element-plus'
import { defineComponent,onMounted, ref } from 'vue'
import {
    getUserAddressList,
    deleteBatchUserAddress
} from '@/api/user/address'


export default defineComponent({
  components: {
    AddAddressDialog,
    confirmDialog
  },
  setup() {
    onMounted(() => {
        initGetUserAddressMethod()
    })
    const dialogDeliver = ref(<any>null)
    const showDeleteDialog = ref(false)
    const tableData = ref([])
    const addressListLoading = ref(false)
    const addressLoadingText = ref('加载中')
    const confirmDialogRef = ref( < any > null)
    const deleteAddressIds = ref([])
    const addAddressEvent = () => {
      dialogDeliver.value.handleDialogOpen()
    }
    const editAddressEvent = (addressId) => {
      dialogDeliver.value.handleDialogOpen(addressId)
    }
    const deleteEvent = (addressId) => {
      deleteAddressIds.value = []
      deleteAddressIds.value.push(addressId)
      confirmDialogRef.value.openConfirm('是否确认要删除吗？')
    }
    // 获取收货地址
    const initGetUserAddressMethod = () => {
      addressListLoading.value = true
      addressLoadingText.value = '加载中'
      getUserAddressList().then(response => {
        addressListLoading.value = false
        if (response.isError) return
        tableData.value = response.data
      })
    }
    
    const getUserAddressMethod = () =>{
       getUserAddressList().then(response => {
           tableData.value = response.data
       })
    }
    
    //新增框,成功回调
    const handleAddAddressDialogSure = () => {
        initGetUserAddressMethod()
     }
    // 删除框,确认回调函数
    const handleConfirmSure = () => {
      if (deleteAddressIds.value.length > 0) {
        addressListLoading.value = true
        addressLoadingText.value = '删除中'
        deleteBatchUserAddress(deleteAddressIds.value).then(response => {
          addressListLoading.value = false
          if (response.isError) return
          deleteAddressIds.value = []
          ElMessage.success(response.msg)
          initGetUserAddressMethod()
        })
      }
    }

    return {
      tableData,
      addAddressEvent,
      dialogDeliver,
      deleteEvent,
      showDeleteDialog,
      editAddressEvent,
      confirmDialogRef,
      handleConfirmSure,
      deleteAddressIds,
      addressListLoading,
      addressLoadingText,
      handleAddAddressDialogSure
    }
  }
})
</script>

<style lang="scss" scoped>
.address-info-box {
  min-height: 680px;
}
.subject {
  padding: 17px 19px;
  border-bottom: 1px solid #F5F5F5;
}
.add-btn {
  width: 88px;
  height: 30px;
  border: 1px solid #0083FF;
  border-radius: 4px;
  color: #0083FF;
}
.address-tag {
  width: 30px;
  height: 17.5px;
  background: #182245;
  color: #fff;
  transform: scale(0.8);
}
::v-deep(.has-gutter .el-table__cell) {
  background: #f5f5f5;
}
</style>

